<template>
  <div :class="['scroll', direction]" ref="scroll">
    <div class="scroll-container">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import ObserveDOM from '@better-scroll/observe-dom'
BScroll.use(Pullup)
BScroll.use(ObserveDOM)

export default {
  props: {
    direction: {
      type: String,
      default: 'vertical'
    },

    isPullUp: {
      type: Boolean,
      default: false
    }
  },

  mounted () {
    this.initBscroll()
  },

  methods: {
    initBscroll () {
      this.bscroll = new BScroll(this.$refs.scroll, {
        scrollX: this.direction === 'horization',
        scrollY: this.direction === 'vertical',
        click: true,
        observeDOM: true,
        pullUpLoad: this.isPullUp
      })
    }
  }
}
</script>

<style scoped>
.scroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.scroll.horization {
  display: flex;
}
.scroll.horization > .scroll-container {
  display: inline-flex;
  height: 100%;
}
</style>
